<template>
  <div>
      <ul>
          <li v-for="item in list" :key="item">
          <!-- 不设置key和设置key的区别是什么？
          不设置key，默认情况下同级兄弟元素按照下标来比较
          设置key，就按照相同的key进行元素比较
          -->
          <!-- 
              key的要求？
              字符串和数值，唯一的不重复
              原则：有id就用id，有唯一的值就用唯一的值，实在什么都没有就才会用索引
           -->
           <!-- key的好处 
           提高了虚拟dom的对比复用性
           
           -->
          {{item}} 
          <input type="text">
          </li>
      </ul>
      <button @click="arr">提交</button>
  </div>
</template>
<!-- vue就地复用策略 -->
<!-- vue会尽可能的就地（同层级，同位置） 对比的是虚拟dom结构，进行差异化的更新，渲染高效，提升性能-->
<script>
export default {
data(){
    return{
        list:['老大','老二','老三']
    }
},
methods:{
arr(){
    this.list.splice(1,0,'我是新来的')
}
}
}
</script>

<style>

</style>